<template>
  <section>
    <el-collapse v-model="activeNames" @change="handleChange" >
      <el-collapse-item  :name="pay.id" v-for="(pay,index) in payList" :key="pay.id">
        <template slot="title">
          {{index+1}}—{{pay.payNo}}——{{pay.state}}
        </template>
        <template slot-scope="scope">
          <!--data(选)、subject(选)、state(选)、payPrice(选)、discountPrice(选)、payTypeCode(选)-->
            <el-row class="row">
            <el-col :span="2" style="text-align: right">支付ID
            </el-col>
            <el-col :span="10" style="margin-left: 30px">{{pay.id}}</el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="2" style="text-align: right">标题</el-col>
            <el-col :span="10" style="margin-left: 30px">{{pay.subject}}</el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="2" style="text-align: right">用户</el-col>
            <el-col :span="2" style="margin-left: 30px">{{pay.userName}}</el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="2" style="text-align: right">订单金额</el-col>
            <el-col :span="2" style="margin-left: 30px">{{pay.totalPrice}}</el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="2" style="text-align: right">优惠金额</el-col>
            <el-col :span="2" style="margin-left: 30px">{{pay.salePrice}}</el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="2" style="text-align: right">实收金额</el-col>
            <el-col :span="2" style="margin-left: 30px">{{pay.payPrice}}</el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="2" style="text-align: right">收款方式</el-col>
            <el-col :span="2" style="margin-left: 30px">{{pay.payType.name}}</el-col>
            <el-col :span="5" style="margin-left: 30px" v-show="pay.edit === true">
              <el-select v-model="newPay.payTypeCode" placeholder="请选择" size="mini">
                <el-option size="mini" v-for="payType in payTypeList" :key="payType.id" :label="payType.name" :value="payType.code"></el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="2" style="text-align: right">操作</el-col>
            <el-col :span="20" style="margin-left: 30px">
              <el-button size="mini" @click=btnPay(pay) :disabled="pay.edit === true || pay.state ===4" type="success">继续支付</el-button>
              <el-button size="mini" @click="editPay(pay)" type="primary">编辑支付</el-button>
              <el-button size="mini" @click="save(pay)" v-show="pay.edit === true">保存</el-button>
              <el-button size="mini" @click="cancel(pay)" v-show="pay.edit === true">取消</el-button>
            </el-col>
          </el-row>
          <el-row v-if="newPay.payTypeCode === 'balance' && pay.edit === true">
            <el-row>总额：{{pay.totalPrice}}</el-row>
            <el-row style="margin-top: 10px">
              <el-col :span="10">现金：<el-input size="mini" style="width: 160px" v-model="newPay.balanceMoney"></el-input></el-col>
            </el-row>
            <el-row style="margin-top: 10px">
              <el-col :span="2">找零：</el-col>
              <el-col :span="10" v-show="newPay.balanceMoney">{{newPay.balanceMoney-pay.totalPrice}}元</el-col>
            </el-row>
          </el-row>
        </template>
      </el-collapse-item>
      <el-pagination v-show="totalPage>0" style="margin-top:10px;"
                     background
                     layout="prev, pager, next"
                     :page-count="totalPage"
                     @current-change="goPage">
      </el-pagination>
    </el-collapse>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "payManagement",
    data() {
      return {
        activeNames:[],
        payList:[],
        tmp:[],
        totalPage:0,
        newPay:{},
        payTypeList:[]
      }
    },
    created(){
      console.log(this.department)
      //加载为支付完成的pay
      this.getPayList()
    },
    watch:{
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getPayList(val-1)
      },
      getPayTypeList(){
        this.fetch({name:"getPayTypeList"})
          .then(res=>{
            console.log(res)
            this.payTypeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      editPay(pay){
        if(pay.edit === undefined){
          Vue.set(pay,'edit',true)//后续添加属性，需要vue联动
        }else {
          pay.edit = true
        }
        this.getPayTypeList()
      },
      save(pay){
        this.newPay.id=pay.id
        if(this.newPay.balanceMoney){
          let p = {...pay.data,balanceMoney:this.newPay.balanceMoney}
          this.newPay.data = p
        }
        console.log(this.newPay)
        this.updatePay(this.newPay)
      },
      updatePay(data){
        this.fetch({name:"updatePay",data:data})
          .then(res=>{
            console.log(res)
            // pay.edit =false
            //更新界面
            this.getPayList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      cancel(pay){
        pay.edit = false
      },
      btnPay(pay){
        console.log(pay)
        if(pay.payType.code ==='wxpay_micropay'){
          console.log('????????')
          this.getAuthodCode(pay)
        }else if(pay.payType.code ==='balance'){
          this.goToPay(pay)
        }
        //继续支付
      },
      getAuthodCode(pay){
        this.$prompt('请扫微信付款码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          console.log(value)
          pay.authCode = value
          console.log(pay)
          this.goToPay(pay)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      goToPay(pay){
        this.fetch({name:"toPay",data:{payNo:pay.payNo,authCode:pay.authCode}})
          .then(res=>{
            console.log(res)
            if(res.data.returnCode === 'SUCCESS'){
              this.$message({type:'sucess',message:'支付成功！'})
              this.getPayList()
            }
            if(res.data.state === 4){
              this.$message({type:'sucess',message:'支付成功！'})
              this.getPayList()
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      handleChange(){},
      getPayList(pageNo){
        let data = {page:pageNo? pageNo:0,
        departmentCode:this.department.code}
        this.fetch({name:"getPayList",data:data})
          .then(res=>{
            console.log(res)
            this.payList = res.content
            this.totalPage = res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>
.row{
  margin: 5px -5px 0 0;
  font-size: 14px;
  font-weight: bold;
  color: #6f7180;
}
</style>
